<template>
  <div class="demo-wrap">
    <div class="demo-header">
      <slot name="header"></slot>
    </div>
    <div class="demo-content" ref="content">
      <div class="demo-source-code" ref="codeCon">
        <p ref="code">
          <slot name="code"></slot>
        </p>
      </div>
      <div class="demo-code-description" ref="descCon">
        <p ref="desc">
          <slot name="desc"></slot>
        </p>
      </div>
    </div>
    <div class="demo-footer" @click="showContent">
        <span :class="[triangle]"></span><span class="opt-text">{{optText}}</span>
    </div>
  </div>
</template>
<script>
  export default{
    data () {
      return {
        isShow: false,
        triangle: 'triangle-drop',
        optText: '显示源码'
      }
    },
    methods: {
      showContent () {
        let contentStyle = this.$refs.content.style;
        if (contentStyle.height) {
          this.triangle = 'triangle-drop';
          this.optText = '显示源码';
          contentStyle.height = '';
        } else {
          this.triangle = 'triangle-down';
          this.optText = '隐藏源码';
          contentStyle.height = this.getContentHeight();
        }
      },
      getContentHeight () {
        var descHeight = this.$refs.descCon.offsetHeight + this.$refs.desc.offsetHeight + 1;
        var codeHeight = this.$refs.codeCon.offsetHeight + this.$refs.code.offsetHeight + 1;
        return descHeight >= codeHeight ? descHeight + 'px' : codeHeight + 'px';
      }
    }
  };
</script>
<style scoped>
  .demo-wrap{
    box-sizing: border-box;
    width: 880px;
    border: 1px solid rgba(234, 238, 251, 1);
    border-radius: 3px;
  }

  .demo-wrap>
  .demo-header{
    padding: 24px;
  }

  .demo-wrap>
  .demo-content{
    background-color: rgba(249, 250, 252, 1);
  }

  .demo-wrap>
  .demo-content{
    display: flex;
    /*box-sizing: border-box;*/
    height: 0;
    border-top: 1px solid rgba(234, 238, 251, 1);
    overflow: hidden;
    background-color: rgba(249, 250, 252, 1);
    transition: height .5s;
  }

  .demo-wrap>
  .demo-content>
  .demo-source-code{
    display: block;
    flex: 1;
    box-sizing: border-box;
    padding: 18px 24px;
    overflow: hidden;
  }

  .demo-wrap>
  .demo-content>
  .demo-code-description{
    display: block;
    flex-basis: 325px;
    box-sizing: border-box;
    padding: 18px 24px;
    border-left: 1px solid rgba(234, 238, 251, 1);
    overflow: hidden;
    line-height: 1.8;
  }

  .demo-wrap>
  .demo-footer
  {
    /*display: inline-block;*/
    box-sizing: border-box;
    border-top: 1px solid rgba(234, 238, 251, 1);
    height: 30px;
    line-height: 36px;
    text-align: center;
    cursor: pointer;
    user-select: none;
  }
  .demo-wrap>
  .demo-footer:hover{
    background-color: rgba(249, 250, 252, 1);
  }
  .demo-wrap>
  .demo-footer>
  .opt-text{
    display: inline-block;
    opacity: 0;
    padding-left: 5px;
    color: lightblue;
    transform: translate3d(60px, 0, 0);
    transition: all 0.2s;
  }

  .demo-wrap>
  .demo-footer:hover>
  .opt-text{
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  .demo-wrap>
  .demo-footer>
  .triangle-drop{
    display: inline-block;
    height: 0;
    border-top: 10px solid lightgray;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
  }

  .demo-wrap>
  .demo-footer:hover>
  .triangle-drop{
    border-top: 10px solid lightblue;
  }

  .demo-wrap>
  .demo-footer>
  .triangle-down{
    display: inline-block;
    height: 0;
    border-bottom: 10px solid lightgray;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
  }

  .demo-wrap>
  .demo-footer:hover>
  .triangle-down{
    border-bottom: 10px solid lightblue;
  }

  .drop-enter{
    height: 0;
  }
  .drop-enter-active{
    height: 100px;
    transition: height 5s;
  }
</style>
